<template>
	<!-- 会员 -->
	<view class="bg-white" style="height: 100vh;">
		<view class="head bg-white">
			<image src="/static/mine/vip.png" mode=""></image>
			<view class="head_img">
				<view class="title">城邦食惠会员</view>
				<view class="vip_time">
					<view class="vip">
						会员
					</view>
					<view class="time">
						有效期：{{vip_time?vip_time:'无'}}
					</view>
				</view>
			</view>
		</view>
		<view class="vip_list flex-cb">
			<view v-for="(item,index) in viplist" :key="index" class="item " :class="{item2:index == isshow}" @click="isshow=index">
				<view class="text">{{item.title}}</view>
				<view class="vipPrice">￥{{item.price}}</view>
			</view>
		</view>
		<view class="title_recommend flex">
			<view class="vertical"></view>会员权益：
		</view>
		<view class="vip_icon_list flex justify-between flex-wrap bg-white">
			<view v-for="(item,index) in iconlist" :key="index" class="vip_icon_list_item" @click="gotoIntegral">
				<image :src="src + item.icon" mode=""></image>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
		<view class="button">
			<image src="https://guizhouchenxun.com/mine/img_ljky_bg.png" mode=""></image>
			<view class="position_img flex-c" @click="handlenavigateto">立即开通</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:0,
				src:'',
				vip_time:'',
				viplist:[],
				iconlist:[]
			};
		},
		onLoad() {
			this.src = this.$base
			this.$api.vipfees().then(res=>{
				this.viplist = res.data
			})
			this.$api.vip_benefits().then(res=>{
				console.log(res);
				this.iconlist = res.data
			})
		},
		onShow() {
			this.getuser()
		},
		methods:{
			gotoIntegral(){
				uni.navigateTo({
					url:'/pageC/mine/Function list/integral'
				})
			},
			getuser(){
				this.$api.user({},true).then(res=>{
					if(res.code == 200001){
						this.vip_time = res.data.vip_expire_time
					}
				})
			},
			handlenavigateto(){
				uni.navigateTo({
					url:'./vipPayment?id='  + this.viplist[this.isshow].id + '&price=' + this.viplist[this.isshow].price
				})
			}
		}
	}
</script>

<style lang="scss">
.head{
	width: 100%;
	height: 317rpx;
	background: #222222;
	image,.head_img{
		width: 688rpx;
		height: 310rpx;
		position: relative;
		top: 35rpx;
		left: 31rpx;
	}
	.head_img{
		position: absolute;
		z-index: 1;
		padding: 51rpx 0 0 32rpx;
		color: #fff;
		.title{
			color: #E7CB90;
			font-size: 36rpx;
			height: 50rpx;
			margin-bottom: 26rpx;
		}
		.vip_time{
			height: 97rpx;
			.vip{
				font-size: 28rpx;
			}
			.time{
				padding-top: 26rpx;
				font-size: 36rpx;
			}
		}
	}
	
}
.vip_list{
	padding: 63rpx 22rpx 30rpx 22rpx;
	.item{
		width: 224rpx;
		height: 155rpx;
		border-radius: 10rpx ;
		background: #EFEFEF;
		view{
			text-align: center;
		}
		.text{
			margin-top: 16rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			height: 40rpx;
		}
		.vipPrice{
			font-size: 34rpx;
			color: #F14364;
			height: 48rpx;
		}
	}
	.item2{
		background: #F8F1DF;
		border: 4rpx solid #FACD89;
	}
	
}
.title_recommend{
		margin-left: 26rpx;
		.vertical{
			width: 10rpx;
			height: 40rpx;
			background: #F34056;
			border-radius: 20rpx;
			margin-right: 15rpx;
		}
	}
.vip_icon_list{
	padding: 21rpx  0 150rpx 0;
	.vip_icon_list_item:nth-of-type(3n+2){
		flex: 1;
		margin-left: 59rpx;
		margin-right: 59rpx;
	}
	.vip_icon_list_item{
		width: 180rpx;
		margin: 20rpx 0;
		text-align: center;
		image{
			width: 79rpx;
			height: 79rpx;
		}
		.text{
			white-space: nowrap;
			margin-top: 10rpx;
			font-size: 30rpx;font-weight: bold;
			color: #333;
		}
	}
}
.button{
	position: relative;
	// top: 56rpx;
	image,.position_img{
		width: 684rpx;
		height: 90rpx;
		position: absolute;
		bottom: 25rpx;
		left: 33rpx;
	}
	.position_img{
		font-size: 32rpx;
		color: #fff;
	}
}
</style>
